<!DOCTYPE html>
<html>
<head>
    <title>网页样式表</title>

    <meta charset="UTF-8"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>

    <meta name="HandheldFriendly" content="true"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link href="./asset/farbox/basic.css" type="text/css" rel="stylesheet"/>
    <link href="./asset/farbox/main.css" type="text/css" rel="stylesheet"/>

    <style type="text/css">
        
            span.md_line{margin-bottom:0.5em; display:block; line-height:1.89}
            .md_line br{ display: none;}
            
    </style>

    <script>
        var flowchat_options = {
            'x': 0, 'y': 0, 'line-width': 1, 'line-length': 50, 'text-margin': 10, 'font-size': 13,
            'font-color': '#3c3c3c', 'line-color': '#666666', 'element-color': '#666666', 'fill': 'transparent',
            'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'class': 'flowchart', 'scale': 1,
            'symbols': { 'start': {}, 'end': {}, 'condition': {}, 'inputoutput': {}, 'operation': {}, 'subroutine': {}}
        }
    </script>
    <script type="text/javascript" src="./asset/other/raphael-min.js"></script>
    <script type="text/javascript" src="./asset/other/flowchart.js"></script>
    <script type="text/javascript" src="./asset/other/echarts.min.js"></script>


</head>

<body>
    
        <a href="./index.html" id="go_to_home"> &lt; home </a>
    
    <div id="sidebar">
        <ul id="sidebar_body">
        
            
            
            
            

            
                <li class="level_1 file">
                    <a href="./01工具使用及基本标签.html" class="">开发工具使用及基本标签</a>
                </li>
            

            
        
            
            
            
            

            
                <li class="level_1 file">
                    <a href="./02列表与表格与表单标签.html" class="">列表/表格/表单标签</a>
                </li>
            

            
        
            
            
            
            

            
                <li class="level_1 file">
                    <a href="./03网页样式表.html" class="selected">网页样式表</a>
                </li>
            

            
        
        </ul>
    </div>

    <div id="main">
        <div class="content_body">
            <h1 class="title"> 网页样式表 </h1>
            <div class="doc_post"> <p class="md_block">

<div class="toc"><ul>
<li>
<a href="#toc_0">网页样式表</a>
<ul>
<li>
<a href="#toc_1">概述</a>
</li>
<li>
<a href="#toc_2">为什么需要样式表</a>
</li>
<li>
<a href="#toc_3">CSS基本语法</a>
</li>
<li>
<a href="#toc_4">样式的分类</a>
<ul>
<li>
<a href="#toc_5">行内样式</a>
</li>
<li>
<a href="#toc_6">内嵌样式表</a>
</li>
<li>
<a href="#toc_7">外部样式表</a>
<ul>
<li>
<a href="#toc_8">两种方式:</a>
<ul>
<li>
<a href="#toc_9">1.链接外部样式表</a>
</li>
<li>
<a href="#toc_10">2.导入外部样式表</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#toc_11">三种样式表的优先级:</a>
</li>
</ul>
</li>
<li>
<a href="#toc_12">选择器与优先级</a>
<ul>
<li>
<a href="#toc_13">基本选择器(参见手册)</a>
</li>
</ul>
</li>
<li>
<a href="#toc_14">文本与字体属性</a>
<ul>
<li>
<a href="#toc_15">一、字体属性主要包括下面几个</a>
<ul>
<li>
<a href="#toc_16">font-family:字体族</a>
</li>
<li>
<a href="#toc_17">font-style:字体样式</a>
</li>
<li>
<a href="#toc_18">font-variant:字体变化</a>
</li>
<li>
<a href="#toc_19">font-weight:字体粗细</a>
</li>
<li>
<a href="#toc_20">font-size:字体大小</a>
</li>
</ul>
</li>
<li>
<a href="#toc_21">二、font的简写实例</a>
</li>
<li>
<a href="#toc_22">三、font的简写注意事项</a>
</li>
<li>
<a href="#toc_23">其它本文属性:</a>
<ul>
<li>
<a href="#toc_24">Color:颜色</a>
</li>
<li>
<a href="#toc_25">Line-height:行高</a>
</li>
<li>
<a href="#toc_26">Text-align:文本对齐方式</a>
</li>
<li>
<a href="#toc_27">Text-decoration:文本修饰</a>
</li>
<li>
<a href="#toc_28">控制元素大小</a>
</li>
<li>
<a href="#toc_29">综合练习代码</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#toc_30">背景属性</a>
<ul>
<li>
<a href="#toc_31">background-color:背景颜色</a>
</li>
<li>
<a href="#toc_32">　background-image:背景图片</a>
</li>
<li>
<a href="#toc_33">background-repeat:背景重复方式</a>
</li>
<li>
<a href="#toc_34">background-position:背景图像的起始位置</a>
</li>
<li>
<a href="#toc_35">background总结与简写</a>
</li>
<li>
<a href="#toc_36">综合练习</a>
</li>
</ul>
</li>
<li>
<a href="#toc_37">列表属性</a>
<ul>
<li>
<a href="#toc_38">list-style-type:列表标记样式</a>
</li>
<li>
<a href="#toc_39">list-style-image:用图片作为列表项标志</a>
</li>
<li>
<a href="#toc_40">list-style-position:列表项标记的位置</a>
</li>
<li>
<a href="#toc_41">list-style简写</a>
</li>
</ul>
</li>
<li>
<a href="#toc_42">浮动属性</a>
<ul>
<li>
<a href="#toc_43">float:浮动</a>
</li>
<li>
<a href="#toc_44">clear:(清除浮动)不让傍边有浮动</a>
</li>
</ul>
</li>
<li>
<a href="#toc_45">盒子模型</a>
<ul>
<li>
<a href="#toc_46">margin:外边界</a>
</li>
<li>
<a href="#toc_47">border:边框</a>
<ul>
<li>
<a href="#toc_48">border-color:颜色</a>
</li>
<li>
<a href="#toc_49">border-width:宽度</a>
</li>
<li>
<a href="#toc_50">border-style:样式</a>
</li>
<li>
<a href="#toc_51">border简写</a>
</li>
</ul>
</li>
<li>
<a href="#toc_52">padding:内填充距离</a>
</li>
<li>
<a href="#toc_53">content:内容(没样式)</a>
</li>
</ul>
</li>
<li>
<a href="#toc_54">position:定位属性</a>
<ul>
<li>
<a href="#toc_55">absolute:绝对定位</a>
</li>
<li>
<a href="#toc_56">relative:相对定位</a>
</li>
<li>
<a href="#toc_57">fixed :固定定位</a>
</li>
<li>
<a href="#toc_58">static ：默认值；默认布局。</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</p>


<h2 id="toc_1">概述</h2>

<p class="md_block">
    <span class="md_line">了解 --&gt;CSS属性<br /></span>
    <span class="md_line">理解 --&gt; CSS语法<br /></span>
    <span class="md_line">运用 --&gt;DIV+CSS布局页面</span>
</p>


<h2 id="toc_2">为什么需要样式表</h2>

<ol>
<li>HTML标签的外观样式比较单一,因HTML发明之初就是为了表示内容的语义</li>
<li>样式表可以美化网页,使页面更漂亮.</li>
<li>样试表可以在多个页面中共享使用,提高工作效率.</li>
<li>样式表能实现内容与样式的分离,方便团队开发</li>
</ol>

<p class="md_block">
    <span class="md_line">具体来说,HTML标签只用来表示内容结构和内容语义,在开发工作中,尽量不要使用HTML的样式属性,样式方面的属性用专门的CSS表示.实现html与css分离,这就是我们后面所说的div+css布局.<br /></span>
    <span class="md_line">在学习样式之前,我们需学习一个div标签.它是一个容器标签,方便控制管理</span>
</p>


<h2 id="toc_3">CSS基本语法</h2>

<p class="md_block">
    <span class="md_line">选择器{属性:属性值;} <br /></span>
    <span class="md_line">行内样式:标签的style属性<br /></span>
    <span class="md_line">内部样式:style标签<br /></span>
    <span class="md_line">外部样式:link标签</span>
</p>


<h2 id="toc_4">样式的分类</h2>

<h3 id="toc_5">行内样式</h3>

<p class="md_block">
    <span class="md_line">把CSS写在标签内,用style属性. 如:height width等.不推荐使用</span>
</p>


<h3 id="toc_6">内嵌样式表</h3>

<p class="md_block">
    <span class="md_line">把CSS写在<code>&lt;head&gt;</code> 与<code>&lt;/head&gt;</code>之间<br /></span>
    <span class="md_line">使用<code>&lt;style&gt;&lt;/style&gt;</code>标签进行声明</span>
</p>


<h3 id="toc_7">外部样式表</h3>

<p class="md_block">
    <span class="md_line">如果多个页面用到一个样式表,用内嵌样式表就会重复.维护成本成高,所以推荐使用外部样式表</span>
</p>


<h4 id="toc_8">两种方式:</h4>

<h5 id="toc_9">1.链接外部样式表</h5>

<p class="md_block">
    <span class="md_line">常用三个属性:路径,是样式表,表是连接的样式是CSS格式</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">”url”</span> <span class="na">rel</span><span class="o">=</span><span class="s">”stylesheet”</span> <span class="na">type</span><span class="o">=</span><span class="s">”text/css”</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h5 id="toc_10">2.导入外部样式表</h5>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="c">&lt;!--</span>
<span class="c">    @import url(“url”);</span>
<span class="c"> --&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<blockquote>

<p class="md_block">
    <span class="md_line">注:导入入引用外部样式表区别:<br /></span>
    <span class="md_line">使用import导入的样式表,在网页初始化时,会被作为文件导入,成为文件的一部分,类似于内嵌<br /></span>
    <span class="md_line">使用链接样式表则是在html标签需要样式时才以链接的方式导入<br /></span>
    <span class="md_line">区别:<br /></span>
    <span class="md_line">1.加载顺序不同:使用链接在加载的同时加载CSS文件,而使用@import则等页面加载全部下载完再被加载,所以,在浏览时有时刚开始没有样式,网速慢时更明显.<br /></span>
    <span class="md_line">2.@import是CSS2.1提出的使用方式,一些老的浏览器并不支持.比如IE4以下的浏览器.<br /></span>
    <span class="md_line">3.当页面使用javascript控制DOM改变页面样式时,使用<code>&lt;link&gt;</code>支持,而@import并不是dom可控制的<br /></span>
    <span class="md_line">4.<code>&lt;link&gt;</code>属于HTML标签,而@import完全是CSS提供的一种样式<br /></span>
    <span class="md_line">所以,我们以后使用的外部样式表,都是使用<link>链接样式表.</span>
</p>

</blockquote>

<h3 id="toc_11">三种样式表的优先级:</h3>

<p class="md_block">
    <span class="md_line">在网页中,样式表的优先级采用就近原则,所以:<br /></span>
    <span class="md_line">行内样式优先级最高,其次内部样式表,最后是外部样式表(而外部样式表中,<link>链接优先级高于@import导入),注意:某些浏览器外部link与内部样式优先级一样,后面的覆盖前面的.<br /></span>
    <span class="md_line">总结起来:优先级就是  <strong>就近原则</strong> <br /></span>
    <span class="md_line">在开发中,我们最好只用其中的一到两种样式表.有利于后期的维护与管理,也不会出现各种样式的”撞车”情况.<br /></span>
    <span class="md_line">CSS中,属性极为重要,只有学好各种属性,才能得心应手.</span>
</p>


<h2 id="toc_12">选择器与优先级</h2>

<h3 id="toc_13">基本选择器(参见手册)</h3>

<p class="md_block">
    <span class="md_line">ID选择器: #id属性值,在页面中要求唯 一<br /></span>
    <span class="md_line">类选择器:.class属性值<br /></span>
    <span class="md_line">标签选择器:标签名</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="c">&lt;!--内部--&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
            <span class="c">/*id选择器  #ID的值*/</span>
            <span class="nn">#div1</span><span class="p">{</span>
                <span class="nb">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="c">/*类选择器  .类名*/</span>
            <span class="nc">.div</span><span class="p">{</span>
                <span class="nb">color</span><span class="o">:</span> <span class="m">#ff00ff</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nc">.d3</span><span class="p">{</span>
                <span class="nb">font-size</span><span class="o">:</span> <span class="m">30px</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="c">/*标签(元素)选择器  标签名*/</span>
            <span class="nt">div</span><span class="p">{</span>
                <span class="nb">border</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">dashed</span> <span class="nb">yellow</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="c">&lt;!--id属性:注意事项,同一个页面中,id值必须唯一--&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div1&quot;</span><span class="p">&gt;</span>fdsfdas<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="c">&lt;!-- class属性:可能重名,而且可以写多个(用空格隔开)--&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d1 div&quot;</span><span class="p">&gt;</span>fdsfdas<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d2 div&quot;</span><span class="p">&gt;</span>fdsfdas<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d3 div&quot;</span><span class="p">&gt;</span>fdsfdas<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<blockquote>

<p class="md_block">
    <span class="md_line">关于选择器的优先级(行内样式不需要选择器,它也是优先级绝对最高的)<br /></span>
    <span class="md_line">经测试在新版的浏览器中(测试时间:2019-12-05),内部样式与外部link导入的样式优先级相同并且后面的覆盖前面的.所以不会导致选择器的优先级冲突. </span>
</p>

</blockquote>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;css/index.css&quot;</span><span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
            <span class="c">/*行内 &gt; (内部=外部)*/</span>
            <span class="c">/*id选择器  &gt; 类选择器  &gt; 标签名选择器*/</span>
            <span class="nc">.d1</span><span class="p">{</span>
                <span class="nb">color</span><span class="o">:</span> <span class="nb">green</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="c">/*自己测试:id &gt; 类     内部 &gt; 外部     内部的类选择器与外部的ID选择器,谁优先级大???*/</span>
        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div1&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d1&quot;</span><span class="p">&gt;</span>这是一个DIV<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">上面用的CSS文件</span>
</p>

<div class="codehilite code_lang_css  highlight"><pre><span></span><span class="c">/*css/index.css*/</span>
<span class="nn">#div1</span><span class="p">{</span>
    <span class="nb">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">复合选择器</span>
</p>

<div class="codehilite code_lang_css  highlight"><pre><span></span>            <span class="c">/*复合选择器*/</span>
            
            <span class="c">/* 两个选择器中间用空格   表示后代选择器*/</span>
            <span class="c">/*意思是:   li标签必须是  .red的后代标签(内嵌)*/</span>
            <span class="nc">.red</span> <span class="nt">li</span><span class="p">{</span>
                <span class="nb">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="c">/* 两个选择器中间用&gt;隔开   表示父子选择器*/</span>
            <span class="c">/* 意思是:li标签必须是ul的儿子标签(内嵌)*/</span>
            <span class="nt">ul</span><span class="o">&gt;</span><span class="nt">li</span><span class="p">{</span>
                <span class="nb">color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="c">/* 两个选择器一起用,中间什么都不放,表示同时满足多个条件*/</span>
            <span class="c">/*li.yellow{</span>
<span class="c">                color: yellow;</span>
<span class="c">            }*/</span>
            <span class="c">/*同时使用多个选择器   用逗号隔开*/</span>
            <span class="nt">li</span><span class="nc">.yellow</span><span class="o">,</span><span class="nt">p</span><span class="nc">.yellow</span><span class="p">{</span>
                <span class="nb">color</span><span class="o">:</span> <span class="nb">yellow</span><span class="p">;</span>
            <span class="p">}</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_14">文本与字体属性</h2>

<h3 id="toc_15">一、字体属性主要包括下面几个</h3>

<p class="md_block">
    <span class="md_line">font-family，font-style，font-variant，font-weight，font-size，font</span>
</p>


<h4 id="toc_16">font-family:字体族</h4>

<p class="md_block">
    <span class="md_line">font-family（字体族,也就是类型）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;</span>
</p>


<h4 id="toc_17">font-style:字体样式</h4>

<p class="md_block">
    <span class="md_line">font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;</span>
</p>


<h4 id="toc_18">font-variant:字体变化</h4>

<p class="md_block">
    <span class="md_line">font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;</span>
</p>


<h4 id="toc_19">font-weight:字体粗细</h4>

<p class="md_block">
    <span class="md_line">font-weight (字体粗细): 是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;</span>
</p>


<h4 id="toc_20">font-size:字体大小</h4>

<p class="md_block">
    <span class="md_line">font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12px，12pt，120%，1em(1em:表示当前字体的大小,)</span>
</p>


<p class="md_block">
    <span class="md_line">如果用 font 属性的话，就可以把几个样式进行简化，减少书的情况；font 属性的值应按以下次序书写(各个属性之间用空格隔开)：<br /></span>
    <span class="md_line">顺序：font-style | font-variant | font-weight | font-size | line-height | font-family</span>
</p>


<h3 id="toc_21">二、font的简写实例</h3>
<div class="codehilite code_lang_css  highlight"><pre><span></span><span class="nc">.font</span><span class="p">{</span>
<span class="nb">font-style</span><span class="o">:</span><span class="nb">italic</span><span class="p">;</span>
<span class="nb">font-variant</span><span class="o">:</span><span class="nb">small-caps</span><span class="p">;</span>
<span class="nb">font-weight</span><span class="o">:</span><span class="nb">bold</span><span class="p">;</span>
<span class="nb">font-size</span><span class="o">:</span><span class="m">12px</span><span class="p">;</span>
<span class="nb">line-height</span><span class="o">:</span><span class="m">1.5em</span><span class="p">;</span>
<span class="nb">font-family</span><span class="o">:</span><span class="s2">&quot;宋体&quot;</span><span class="o">,</span><span class="s2">&quot;黑体&quot;</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">上面的样式简写为：</span>
</p>

<div class="codehilite code_lang_css  highlight"><pre><span></span><span class="nc">.font</span><span class="p">{</span><span class="nb">font</span><span class="o">:</span><span class="nb">italic</span> <span class="nb">small-caps</span> <span class="nb">bold</span> <span class="m">12px</span><span class="o">/</span><span class="m">1.5em</span> <span class="s2">&quot;宋体&quot;</span><span class="o">,</span><span class="s2">&quot;黑体&quot;</span><span class="p">;}</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_22">三、font的简写注意事项</h3>

<p class="md_block md_has_block_below md_has_block_below_blockquote">
    <span class="md_line">1、简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。<br /></span>
    <span class="md_line">2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值.</span>
</p>


<blockquote>

<p class="md_block">
    <span class="md_line">em是何物？  (1em 表示当前字体大小.)<br /></span>
    <span class="md_line">em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。<br /></span>
    <span class="md_line">em有如下特点： <br /></span>
    <span class="md_line">1. em的值并不是固定的；<br><br /></span>
    <span class="md_line">2. em会继承父级元素的字体大小。</span>
</p>


<p class="md_block">
    <span class="md_line">重写步骤：<br /></span>
    <span class="md_line">1. body选择器中声明Font-size=62.5%；<br /></span>
    <span class="md_line">2. 将你的原来的px数值除以10，然后换上em作为单位；<br /></span>
    <span class="md_line">简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。<br /></span>
    <span class="md_line">3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。</span>
</p>

</blockquote>

<h3 id="toc_23">其它本文属性:</h3>

<h4 id="toc_24">Color:颜色</h4>

<p class="md_block">
    <span class="md_line">设置本文颜色,使用颜色名(共16种),二使用16进制RGB值(00-ff),白色(#ffffff) 黑色(#000000)<br /></span>
    <span class="md_line">建议使用#+十六进制,简单直观,不用担心兼容性问题.</span>
</p>


<h4 id="toc_25">Line-height:行高</h4>

<p class="md_block">
    <span class="md_line">设置行高,三个单位:px 200% 数字(表示em)<br /></span>
    <span class="md_line">如:</span>
</p>

<div class="codehilite code_lang_css  highlight"><pre><span></span><span class="p">{</span> <span class="nb">line-height</span><span class="o">:</span><span class="m">25px</span><span class="p">;}</span>        <span class="c">/*行高25像素*/</span>
<span class="p">{</span> <span class="nb">line-height</span><span class="o">:</span><span class="m">200%</span><span class="p">;}</span>    <span class="c">/*百分比,表示2位行距*/</span>
<span class="p">{</span> <span class="nb">line-height</span><span class="o">:</span><span class="m">2</span><span class="p">;}</span>       <span class="c">/*em,用它与当前字体相乘.行高是当前字体高的2倍*/</span>
</pre></div>

<!--block_code_end-->
<h4 id="toc_26">Text-align:文本对齐方式</h4>

<p class="md_block">
    <span class="md_line">设置本文对齐方式,左,中,右对齐,(left默认值  conter  right )</span>
</p>


<h4 id="toc_27">Text-decoration:文本修饰</h4>

<p class="md_block">
    <span class="md_line">向文本添加修饰(下划线,上划线,删除线等效果)<br /></span>
    <span class="md_line">none:默认不加修饰   如:<code>{text-decoration:none;}</code><br /></span>
    <span class="md_line">overline:上划线,这个不常用<br /></span>
    <span class="md_line">underline:下划线       如:<code>{text-decoration:underline;}</code><br /></span>
    <span class="md_line">        line-through:删除线,这个不常用.</span>
</p>


<h4 id="toc_28">控制元素大小</h4>

<p class="md_block">
    <span class="md_line">width:宽度<br /></span>
    <span class="md_line">height:高度<br /></span>
    <span class="md_line">常用单位是px(像素)</span>
</p>


<h4 id="toc_29">综合练习代码</h4>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
            <span class="nn">#d1</span><span class="p">{</span>
                <span class="c">/*设置文字的样式的4个*/</span>
                <span class="nb">font-family</span><span class="o">:</span> <span class="s2">&quot;隶书&quot;</span><span class="o">,</span><span class="s1">&#39;宋体&#39;</span><span class="p">;</span> <span class="c">/*设置字体族,可以设置多个,用逗号隔开,优先级从左到右*/</span>
                <span class="nb">font-style</span><span class="o">:</span> <span class="nb">italic</span><span class="p">;</span> <span class="c">/*是否是斜体*/</span>
                <span class="nb">font-weight</span><span class="o">:</span> <span class="nb">bold</span><span class="p">;</span> <span class="c">/*是否加粗   100-900 bold相当于700 正常不加是400*/</span>
                <span class="nb">font-size</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span><span class="c">/*字体大小,谷歌支持最小为12px,老版火狐最小支持10px*/</span>
                
                <span class="c">/*文本相关的*/</span>
                <span class="nb">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>  <span class="c">/*文本颜色*/</span>
                <span class="nb">line-height</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span><span class="c">/*文本一行的行高*/</span>
                <span class="nb">text-align</span><span class="o">:</span> <span class="nb">right</span><span class="p">;</span><span class="c">/*文本对齐方式:左,中,右   left,center,right*/</span>
                <span class="nb">text-decoration</span><span class="o">:</span> <span class="nb">line-through</span><span class="p">;</span><span class="c">/*文本修饰(加上划,下划,删除线)*/</span>
                
                <span class="c">/*常的文字CSS提供了简写方案*/</span>
                
                <span class="c">/*控制大小的*/</span>
                <span class="nb">height</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="c">/*元素高度*/</span>
                <span class="nb">width</span><span class="o">:</span> <span class="m">500px</span><span class="p">;</span>  <span class="c">/*元素宽度*/</span>
            <span class="p">}</span>
            <span class="nn">#d2</span><span class="p">{</span>
                <span class="c">/*加中括号表示可选择的  可以不写,也可以写*/</span>
                <span class="c">/*font可以简写: [是否斜体]  [是否加粗]  字体大小[/行高]  字体族*/</span>
                <span class="nb">font</span><span class="o">:</span> <span class="m">30px</span><span class="o">/</span><span class="m">40px</span> <span class="s2">&quot;华文琥珀&quot;</span><span class="o">,</span><span class="s2">&quot;隶书&quot;</span><span class="p">;</span>
            <span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;d1&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d&quot;</span><span class="p">&gt;</span>这是第01个DIV标签HelloWorld<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;d2&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d&quot;</span><span class="p">&gt;</span>这是第02个DIV标签<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;d3&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d&quot;</span><span class="p">&gt;</span>这是第03个DIV标签<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;d4&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d&quot;</span><span class="p">&gt;</span>这是第04个DIV标签<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;d5&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d&quot;</span><span class="p">&gt;</span>这是第05个DIV标签<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;d6&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;d&quot;</span><span class="p">&gt;</span>这是第06个DIV标签<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_30">背景属性</h2>

<h3 id="toc_31">background-color:背景颜色</h3>

<p class="md_block">
    <span class="md_line">背景颜色:值有三种方式:颜色名,十六进制值,transparent(透明)<br /></span>
    <span class="md_line md_line_dom_embed"><code>{background-color:#ffcc99}</code><br /></span>
    <span class="md_line">一般元素默认背景都是透明的.</span>
</p>


<h3 id="toc_32">　background-image:背景图片</h3>

<p class="md_block">
    <span class="md_line">{background-image:url(images/bg.jpg);}</span>
</p>


<h3 id="toc_33">background-repeat:背景重复方式</h3>

<p class="md_block">
    <span class="md_line">背景重复方式,值有四个:<br /></span>
    <span class="md_line">repeat  水平与垂值都重复(默认值)<br /></span>
    <span class="md_line">repeat-x    水平重复<br /></span>
    <span class="md_line">repeat-y    垂直重复<br /></span>
    <span class="md_line">no-repeat不重复(只出现一次)</span>
</p>


<h3 id="toc_34">background-position:背景图像的起始位置</h3>

<pre><code>背景图像的起始位置,它的值有三种:
1.百分比:共有两个值,在水平方向的百分比与垂直方向的百分比
2.使用top,left,center,right,bottom等值进行设置
3.使用像素,在水平方向与垂直方向的像素值,可以是负数.常用.</code></pre>

<!--block_code_end-->
<h3 id="toc_35">background总结与简写</h3>

<p class="md_block">
    <span class="md_line">背景</span>
</p>

<div class="codehilite code_lang_css  highlight"><pre><span></span> <span class="nt">background-color</span><span class="err">：</span><span class="nn">#999999</span><span class="err">；</span> <span class="c">/*元素的背景色*/</span>
 <span class="nt">background-image</span> <span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="s2">&quot;path/bgFile.gif&quot;</span><span class="o">);</span> <span class="c">/*设置背景图像*/</span>
 <span class="nt">background-repeat</span> <span class="o">:</span> <span class="nt">repeat-x</span> <span class="o">|</span> <span class="nt">repeat-y</span> <span class="o">|</span> <span class="nt">repeat</span> <span class="o">|</span> <span class="nt">no-repeat</span><span class="o">;</span> <span class="c">/*设置重复方式*/</span>
 <span class="nt">background-attachment</span> <span class="o">:</span> <span class="nt">fixed</span> <span class="o">|</span> <span class="nt">scroll</span><span class="o">;</span> <span class="c">/*设置背景图片的固定方式*/</span>
<span class="c">/* background-position : X轴坐标,Y轴坐标*/</span><span class="o">[</span><span class="nt">top</span><span class="o">,</span><span class="nt">bottom</span><span class="o">,</span><span class="nt">center</span><span class="o">,</span><span class="nt">left</span><span class="o">,</span><span class="nt">right</span><span class="o">,</span><span class="nt">20px</span><span class="o">,</span><span class="nt">10</span><span class="o">%];</span>  <span class="c">/*设置背景的左上角位置,坐标可以是以百分比或固定单位*/</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line"> background  可以用这个属性把前面几个综合起来进行简写,</span>
</p>


<p class="md_block">
    <span class="md_line">background 各个值的次序依次如下：<br /></span>
    <span class="md_line">background-color | background-image  | background-repeat | background-attachment | background-position</span>
</p>


<p class="md_block">
    <span class="md_line">如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉background-attachment和background-position的话：</span>
</p>

<div class="codehilite code_lang_css  highlight"><pre><span></span><span class="nt">background</span><span class="o">:</span> <span class="nn">#FFCC66</span> <span class="nt">url</span><span class="o">(</span><span class="s2">&quot;butterfly.gif&quot;</span><span class="o">)</span> <span class="nt">no-repeat</span><span class="o">;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">例如:</span>
</p>

<div class="codehilite code_lang_css  highlight"><pre><span></span><span class="nc">.bg01</span><span class="p">{</span>
   <span class="nb">background-color</span><span class="o">:</span> <span class="m">#FFCC66</span><span class="p">;</span>
   <span class="nb">background-image</span><span class="o">:</span> <span class="sx">url(&quot;path/bgFile.gif&quot;)</span><span class="p">;</span>
   <span class="nb">background-repeat</span><span class="o">:</span> <span class="nb">no-repeat</span><span class="p">;</span>
   <span class="nb">background-attachment</span><span class="o">:</span> <span class="nb">fixed</span><span class="p">;</span>
   <span class="nb">background-position</span><span class="o">:</span> <span class="nb">left</span> <span class="nb">top</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">上面可以简写为:</span>
</p>

<div class="codehilite code_lang_css  highlight"><pre><span></span><span class="nc">.bg01</span><span class="p">{</span><span class="nb">background</span><span class="o">:</span><span class="m">#FFCC66</span>  <span class="sx">url(&quot;path/bgFile.gif&quot;)</span>  <span class="nb">no-repeat</span>  <span class="nb">fixed</span>  <span class="nb">left</span>  <span class="nb">top</span><span class="p">;</span> <span class="p">}</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_36">综合练习</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
            <span class="nt">div</span><span class="p">{</span>
                <span class="nb">width</span><span class="o">:</span> <span class="m">900px</span><span class="p">;</span>
                <span class="nb">height</span><span class="o">:</span> <span class="m">900px</span><span class="p">;</span>
                <span class="nb">border</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>

                <span class="c">/*background-color: #FF00FF;</span>
<span class="c">                background-image: url(img/002.jpg);</span>
<span class="c">                background-repeat: no-repeat;</span>
<span class="c">                background-position: center center;*//*top center bottom left right*/</span>
                
                <span class="c">/*简写顺序:background-color | background-image | background-repeat | background-attachment | background-position*/</span>
                <span class="c">/*每个参数都是可选的,但注意:background-attachment与background-position是针对背景图片的*/</span>
                <span class="nb">background</span><span class="o">:</span><span class="m">#cccccc</span> <span class="sx">url(img/002.jpg)</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>123123<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_37">列表属性</h2>

<h3 id="toc_38">list-style-type:列表标记样式</h3>

<p class="md_block">
    <span class="md_line">列表标记:常用值四个(disc,circle,spuare,none)<br /></span>
    <span class="md_line">disc        缺省值,黑圆点<br /></span>
    <span class="md_line">circle  空心圆点        <code>{list-style-type:circle;}</code><br /></span>
    <span class="md_line">spuare 小黑方块     <code>{list-style-type:square;}</code><br /></span>
    <span class="md_line">none 无列表项标志 <code>{list-style-type:none;}</code><br /></span>
    <span class="md_line">如图所示,四种列表标记<br /></span>
    <span class="md_line md_line_dom_embed"><img onerror="this.src='../_image/2019-12-05-11-29-34.jpg';this.onerror=null;"  class="" src="/_image/2019-12-05-11-29-34.jpg" alt="" title="" ></span>
</p>


<h3 id="toc_39">list-style-image:用图片作为列表项标志</h3>

<p class="md_block">
    <span class="md_line md_line_dom_embed"><code>{list-style-image:url(./images/dot.gif);}</code></span>
</p>


<h3 id="toc_40">list-style-position:列表项标记的位置</h3>

<pre><code>列表项标记的位置,有两个值
outside:项目标记在文本以外,环绕文本不根据标记对齐(默认值)
inside:项目标记在文本以内,环绕文本根据标记对齐,</code></pre>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">列标项两种标记位置图示:<br /></span>
    <span class="md_line md_line_dom_embed"><img onerror="this.src='../_image/2019-12-05-11-31-21.jpg';this.onerror=null;"  class="" src="/_image/2019-12-05-11-31-21.jpg" alt="" title="" ></span>
</p>


<h3 id="toc_41">list-style简写</h3>
<div class="codehilite code_lang_css  highlight"><pre><span></span><span class="p">{</span><span class="nb">list-style</span><span class="o">:</span><span class="nb">list-style-type</span> <span class="nb">list-style-position</span> <span class="nb">list-style-image</span><span class="p">;}</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">如 <code>ul{list-style:circle inside url(./images/a.gif);}</code>表示列表空心圆点,标记在文本以内,标记图片为url中内容</span>
</p>


<h2 id="toc_42">浮动属性</h2>

<h3 id="toc_43">float:浮动</h3>

<p class="md_block">
    <span class="md_line">它的三个属性值:<br /></span>
    <span class="md_line">none:不浮动,默认值<br /></span>
    <span class="md_line">left:向左浮动<br /></span>
    <span class="md_line">right:向右浮动</span>
</p>


<h3 id="toc_44">clear:(清除浮动)不让傍边有浮动</h3>

<pre><code>设置元素的哪一侧不允许有浮动元素,它有四个值
left        右侧不允许有浮动元素
right       右侧不允许有浮动元素
both        两侧(左右)都不允许有浮动元素
none        两边(左右)都允许有浮动元素</code></pre>

<!--block_code_end-->
<h2 id="toc_45">盒子模型</h2>
<img onerror="this.src='../_image/2019-12-05-11-32-30.jpg';this.onerror=null;"  class="" src="/_image/2019-12-05-11-32-30.jpg" alt="" title="" >
<h3 id="toc_46">margin:外边界</h3>

<p class="md_block">
    <span class="md_line">元素与元素之间的距离.</span>
</p>


<h3 id="toc_47">border:边框</h3>

<p class="md_block">
    <span class="md_line">三个属性:在设置时要把这三个属性很好配合才能达到良好效果.</span>
</p>


<h4 id="toc_48">border-color:颜色</h4>
<img onerror="this.src='../_image/2019-12-05-11-32-59.jpg';this.onerror=null;"  class="" src="/_image/2019-12-05-11-32-59.jpg" alt="" title="" ><div class="codehilite code_lang_css  highlight"><pre><span></span><span class="p">{</span><span class="nb">border-left-color</span><span class="o">:</span><span class="m">#ff0000</span><span class="p">;}</span>  <span class="c">/*左边框为红色*/</span>
<span class="p">{</span><span class="nb">border</span><span class="o">:</span><span class="m">#0000ff</span><span class="p">;}</span>     <span class="c">/*四个边框都设为蓝色*/</span>
<span class="p">{</span><span class="nb">border-color</span><span class="o">:</span><span class="m">#d780e6</span> <span class="m">#ff0000</span> <span class="m">#efd768</span> <span class="m">#8870e0</span><span class="p">;}</span>  <span class="c">/*分别设置四个边框的颜色,上,右,下,左*/</span>
</pre></div>

<!--block_code_end-->
<h4 id="toc_49">border-width:宽度</h4>

<p class="md_block">
    <span class="md_line">它有三个值,但不thin:细边框thick:精边框medium:(默认值)中等边框相当于2px<br /></span>
    <span class="md_line">        width的值以数值表示,例如:border-width:2px(上面的不常用,这个最常用)</span>
</p>


<h4 id="toc_50">border-style:样式</h4>

<pre><code>常用值:
none        无边框
dotted  点状边框(在大多数浏览器中呈现为实线)
dashed  虚线边框
solid       实现边框
double  双线边框</code></pre>

<!--block_code_end-->
<h4 id="toc_51">border简写</h4>

<pre><code>    顺序为width        style       color
    如{border:1px solid #f00} 为1像素,实线边框,红色</code></pre>

<!--block_code_end-->
<h3 id="toc_52">padding:内填充距离</h3>

<p class="md_block">
    <span class="md_line">边框内填充距离.<br /></span>
    <span class="md_line">可以分四个方向设置:<br /></span>
    <span class="md_line">padding-top:<br /></span>
    <span class="md_line">padding-right:<br /></span>
    <span class="md_line">padding-bottom:<br /></span>
    <span class="md_line">padding-left:<br /></span>
    <span class="md_line">    也可以一次设置:padding:上 右 下 左;<br /></span>
    <span class="md_line">    也可以用两个值:padding:10px 5px;   /*上下:10px  左右:5px*/<br /></span>
    <span class="md_line">    也可以用一个值:padding:10px;   /*上下左右各10px*/</span>
</p>


<h3 id="toc_53">content:内容(没样式)</h3>

<h2 id="toc_54">position:定位属性</h2>

<h3 id="toc_55">absolute:绝对定位</h3>

<p class="md_block">
    <span class="md_line">脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。</span>
</p>


<h3 id="toc_56">relative:相对定位</h3>

<p class="md_block">
    <span class="md_line">不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。</span>
</p>


<h3 id="toc_57">fixed :固定定位</h3>

<p class="md_block">
    <span class="md_line">类似于absolute，但不随着滚动条的移动而改变位置。</span>
</p>


<h3 id="toc_58">static ：默认值；默认布局。</h3>

<p class="md_block">
    <span class="md_line">CSS 定位属性允许你对元素进行定位。</span>
</p>

<table>
 <thead><tr><th style="text-align:left">属性</th>
<th style="text-align:left">描述</th>
 </tr>
</thead>
 <tbody><tr><td style="text-align:left">top </td>
<td style="text-align:left"> 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。</td>
</tr>
<tr><td style="text-align:left">right </td>
<td style="text-align:left"> 定义了定位元素右外边距边界与其包含块右边界之间的偏移。</td>
</tr>
<tr><td style="text-align:left">bottom </td>
<td style="text-align:left"> 定义了定位元素下外边距边界与其包含块下边界之间的偏移。</td>
</tr>
<tr><td style="text-align:left">left</td>
<td style="text-align:left">定义了定位元素左外边距边界与其包含块左边界之间的偏移。</td>
</tr>
<tr><td style="text-align:left">overflow</td>
<td style="text-align:left">设置当元素的内容溢出其区域时发生的事情。</td>
</tr>
<tr><td style="text-align:left">z-index</td>
<td style="text-align:left">设置元素的堆叠顺序。</td>
</tr>
</tbody> 
</table>
<!--block_code_end--> </div>
        </div>

    </div>





<script>
    // auto focus for menu
    window.onload = function(){
        var sidebar = document.getElementById('sidebar');
        var current = document.getElementsByClassName('selected')[0];
        if (current && sidebar){
            sidebar.scrollTop = current.offsetTop - sidebar.clientHeight/2 + 100
        }
    };
</script>




</body>

</html>